<template>
  <div>
    <div class="product-img">
      <el-image :src="pic" :preview-src-list="srcList" fit="contain" style="width: 200px; height: 200px" />
    </div>
    <div class="swiper-body">
      <div class="swiper-container" style="height: 80px">
        <div class="swiper-wrapper">
          <div v-for="(item, index) in delivery" :key="index" class="swiper-slide">
            <div class="img-item" :class="{ active: actIndex === index }">
              <el-image :src="item" :preview-src-list="srcList" fit="contain" style="width: 64px; height: 64px" @mouseenter="handleChangeImage(item, index)" />
            </div>
          </div>
        </div>
      </div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button swiper-button-prev" :class="{ swiperDisable: activeIndex === 0 }" @click="handleClickLeft" />
      <div class="swiper-button swiper-button-next" :class="{ swiperDisable: activeIndex >= delivery.length - 4 }" @click="handleClickRight" />
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      list: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      return {
        delivery: [],
        activeIndex: 0,
        pic: '',
        srcList: []
      }
    },
    watch: {
      list: {
        handler(v) {
          if (Array.isArray(v) && v.length > 0) {
            this.delivery = v
            this.initSwiper()
          }
        },
        immediate: true
      }
    },
    methods: {
      initSwiper() {
        var that = this
        this.srcList = this.delivery
        this.handleChangeImage(this.delivery[0], 0)
        this.$nextTick(() => {
          // eslint-disable-next-line no-undef
          that.Swiper = new Swiper('.swiper-container', {
            mode: 'horizontal',
            // loop: true, // 循环模式选项
            slidesPerView: 3,
            spaceBetween: 0
          })
        })
      },
      handleChangeImage(v, index) {
        this.actIndex = index
        this.pic = v
      },
      handleClickLeft(e) {
        this.Swiper.slidePrev()
        this.activeIndex = this.Swiper.activeIndex
      },
      handleClickRight(e) {
        this.Swiper.slideNext()
        this.activeIndex = this.Swiper.activeIndex
      }
    }
  }
</script>
<style lang="scss" scoped>
  .product-img {
    width: 200px;
    height: 200px;
    background-color: #fff;

    img {
      max-height: 100%;
      max-width: 100%;
    }
  }
  .swiper-body {
    margin-top: 5px;
    position: relative;
    width: 200px;
    height: 80px;
    .img-item {
      width: 64px;
      height: 64px;
      border: 1px solid #fff;
      background-color: #f5f7fa;
      &.active {
        border: 1px solid #000;
        overflow: hidden;
      }
    }
    .swiper-container {
      width: 200px;
    }
    .swiper-slide {
      width: 100px;
    }

    // ::v-deep {
      .swiper-button {
        position: absolute;
        background: #fff;
        box-shadow: 0 0 10px rgb(0 0 0 / 20%);
        width: 32px;
        height: 32px;
        border-radius: 49%;
        color: #000;
        bottom: 28px;
        z-index: 999;
        padding: 5px;
        cursor: pointer;
        transform: translate(0, 0);
        &.swiperDisable {
          opacity: 0.4;
          cursor: not-allowed;
        }
      }
      .swiper-button-next,
      .swiper-container-rtl .swiper-button-prev {
        right: -12px;
      }
      .swiper-button-prev,
      .swiper-container-rtl .swiper-button-next {
        left: -12px;
      }
      img {
        width: 100%;
        height: 100%;
      }
      .swiper-button-next:after,
      .swiper-button-prev:after {
        font-size: 16px;
        font-weight: bold;
      }
    // }
  }
</style>
